<!-- 积分管理 - 员工积分，兑换 -->
<template>
  <div style="margin-top: 30px">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="所属工厂" class="mr15" label-width="120px" prop="factoryName">
            <el-select
              v-model="form.factoryName"
              :disabled="isDetail || noAdd"
              :placeholder="isDetail ? '' : '请选择所属工厂'"
              clearable
              @change="getfactoryt"
            >
              <el-option
                v-for="item in factoryList"
                :key="item.code"
                :label="item.factoryName"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="仓库编码" class="mr15" label-width="120px" prop="serialNumber">
            <el-input
              v-model="form.serialNumber"
              :disabled="isDetail || noAdd"
              :placeholder="isDetail ? '' : '请输入仓库编码'"
              maxlength="80"
              show-word-limit
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="仓库名称" class="mr15" label-width="120px" prop="name">
            <el-input
              v-model="form.name"
              :disabled="isDetail || noAdd"
              :placeholder="isDetail ? '' : '请输入仓库名称'"
              maxlength="80"
              show-word-limit
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="仓库类型" class="mr15" label-width="120px" prop="type">
            <el-select
              v-model="form.type"
              :disabled="isDetail"
              :placeholder="isDetail ? '' : '请选择仓库类型'"
              clearable
            >
              <el-option
                v-for="item in warehouseTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="联系人" class="mr15" label-width="120px" prop="contacts">
            <el-input
              v-model="form.contacts"
              :disabled="isDetail"
              :placeholder="isDetail ? '' : '请输入联系人'"
              maxlength="80"
              show-word-limit
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话" class="mr15" label-width="120px" prop="landlineNumber">
            <el-input
              v-model="form.landlineNumber"
              :disabled="isDetail"
              :placeholder="isDetail ? '' : '请输入联系电话'"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="手机号" class="mr15" label-width="120px" prop="phoneNumber">
            <el-input
              v-model="form.phoneNumber"
              :disabled="isDetail"
              :placeholder="isDetail ? '' : '请输入手机号'"
              maxlength="11"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="传真" class="mr15" label-width="120px" prop="fax">
              <el-input
                v-model="form.fax"
                :disabled="isDetail"
                :placeholder="isDetail ? '' : '请输入传真'"
              />
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="邮箱" class="mr15" label-width="120px" prop="email">
            <el-input
              v-model="form.email"
              :disabled="isDetail"
              :placeholder="isDetail ? '' : '请输入邮箱'"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="启用库位管理" class="mr15" label-width="120px">
            <el-checkbox v-model="form.locationManagement" :disabled="isDetail"></el-checkbox>
          </el-form-item>
        </el-col>

        <el-row>
          <el-col :span="12">
            <el-form-item label="所在区域" prop="areaList" class="mr15" label-width="120px">
              <el-cascader
                v-model="form.areaList"
                :options="areaOptions"
                style="width: 100%"
                :disabled="isDetail"
                :placeholder="isDetail ? '' : '请选择所在区域'"
                :props="{ value: 'countyCode', label: 'countyName', children: 'children' }"
                @change="change"
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="X坐标" label-width="120px" prop="latitude">
              <el-input
                v-model="form.latitude"
                :disabled="isDetail"
                :placeholder="isDetail ? '' : '请输入X坐标'"
                maxlength="12"
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="Y坐标" class="mr15" label-width="100px" prop="longitude">
              <el-input
                v-model="form.longitude"
                :disabled="isDetail"
                :placeholder="isDetail ? '' : '请输入Y坐标'"
                maxlength="12"
              />
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <span class="map" @click="mapClick">地图选择</span>
          </el-col>
        </el-row>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="详细地址" class="mr15" label-width="120px" prop="address">
            <el-input
              v-model="form.address"
              :disabled="isDetail"
              :placeholder="isDetail ? '' : '请输入仓库详细地址'"
              maxlength="100"
              show-word-limit
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="备注" class="mr15" label-width="120px" prop="remarks">
              <el-input
                v-model="form.remarks"
                :disabled="isDetail"
                :placeholder="isDetail ? '' : '请输入备注'"
                maxlength="100"
                show-word-limit
              />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>

    <div v-if="!isDetail" slot="footer" class="mr15 dialog-footer">
      <el-button type="primary" :loading="isDisable" plain @click="submitData">确 定</el-button>
    </div>
  </div>
</template>
<script>
// import {
//   warehouseAdd,
//   warehouseEdit,
//   warehouseDetail,
//   factory
// } from '@/api/basicInfo/warehouseManage'
export default {
  name: 'WarehouseManageAED',
  props: {
    operationType: {
      type: String,
      required: true
    },
    operationCode: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      mapFlag: false,
      code: '',
      obj: {},
      isDetail: this.operationType === 'detail', // 详情的时候隐藏确定按钮
      noAdd: this.operationType === 'edit', // 修改的时候仓库名称和仓库编码禁用
      isDisable: false, //确定按钮是否禁用
      warehouseTypeList: [], // 仓库类型
      areaOptions: [], // 省市县区
      form: {
        areaList: [],
        address: '', //地址
        city: '', //市
        code: '', //数据标识
        contacts: '', //联系人
        country: '', //国家
        county: '', //县/区
        email: '', //邮箱
        fax: '', //传真
        groupCode: '', //所属组织
        landlineNumber: '', //联系人号码
        latitude: '', //维度
        longitude: '', //经度
        name: '', //仓库名称
        phoneNumber: '', //手机号码
        province: '', //省
        remarks: '', //备注
        serialNumber: '', //仓库代码
        locationManagement: true,
        status: '', //状态
        factoryCode: '', //所属工厂code
        factoryName: '', //所属工厂name
        type: '' //仓库类型
      },
      factoryList: [], //所属工厂
      area: [],
      rules: {
        factoryName: [{ required: true, message: '请选择所属工厂', trigger: 'blur' }],
        name: [{ required: true, message: '请输入仓库名称', trigger: 'blur' }],
        serialNumber: [{ required: true, message: '请输入仓库编码', trigger: 'blur' }],
        type: [{ required: true, message: '请选择仓库类型', trigger: 'blur' }],
        latitude: [{ pattern: /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/, message: '纬度必须大于0' }],
        longitude: [{ pattern: /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/, message: '经度必须大于0' }],
        phoneNumber: [{ pattern: /^[1][0-9]{10}$/, message: '手机号格式有误！', trigger: 'blur' }],
        landlineNumber: [{ pattern: /^[0-9]*$/, message: '联系电话格式有误！', trigger: 'blur' }],
        fax: [
          {
            pattern: /^(?:\d{3,4}-)?\d{7,8}(?:-\d{1,6})?$/,
            message: '传真格式有误！',
            trigger: 'blur'
          }
        ],
        email: [
          {
            pattern: /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/,
            message: '邮箱格式有误！',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {
    // 获取 仓库类型列表 枚举数据
    const enumData = this.getEnumsOrDict('enum', 'warehouseTypeList')
    this.warehouseTypeList = enumData

    // 省市县区数据
    this.publicAPI.getAreaData().then((res) => {
      this.areaOptions = res.data.records
    })
    this.getfactorytList()
    // 编辑和查看详情调用 详情数据接口
    if (this.operationType !== 'add') {
      this.getDetailData()
    }
  },
  methods: {
    getfactorytList() {
      factory().then((res) => {
        this.factoryList = res.data
      })
    },
    // 所属工厂
    getfactoryt(val) {
      this.factoryList.find((item) => {
        if (item.code === val) {
          this.form.factoryCode = item.code
          this.form.factoryName = item.factoryName
        }
      })
    },
    // 提交数据 - 新增 or 编辑
    submitData() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.isDisable = true
          const requestOperation = this.operationType === 'add' ? warehouseAdd : warehouseEdit
          this.form.locationManagement = this.form.locationManagement === true ? 1 : 0
          requestOperation(this.form)
            .then((res) => {
              this.$message.success(res.msg)
              this.$emit('operationComplete', this.operationType)
              this.isDisable = false
            })
            .catch(() => (this.isDisable = false))
        } else {
          return false
        }
      })
    },
    bMapDate(val) {
      if (val.data.length === 0) {
        // this.form.address = val.name
        this.form.adcode = val.adcode
        this.form.latitude = val.lat
        this.form.longitude = val.lng
        this.mapFlag = false
        return
      }
      const { areaOptions } = this
      this.form.address = val.name
      this.form.adcode = val.adcode
      this.form.latitude = val.lat
      this.form.longitude = val.lng
      let arr = []
      areaOptions.map((v) => {
        if (v.countyName === val.data[0]) {
          arr.push(v.countyCode)
          v.children.map((i) => {
            if (i.countyName === val.data[1]) {
              arr.push(i.countyCode)
              i.children.map((t) => {
                if (t.countyName === val.data[2]) {
                  arr.push(t.countyCode)
                }
              })
            }
          })
        }
      })
      this.form.areaList = arr
      this.mapFlag = false
    },
    change(value) {
      const { areaOptions } = this
      let arr = []
      areaOptions.map((v) => {
        if (v.countyCode === value[0]) {
          arr.push(v.countyName)
          v.children.map((i) => {
            if (i.countyCode === value[1]) {
              arr.push(i.countyName)
              i.children.map((t) => {
                if (t.countyCode === value[2]) {
                  arr.push(t.countyName)
                }
              })
            }
          })
        }
      })
      this.area = arr
    },
    mapClick() {
      this.change(this.form.areaList)
      if (this.form.areaList.length !== 0) {
        let name = `${this.area.toString()}${this.form.address}`
        this.obj = {
          poi: {
            adcode: this.form.adcode || '',
            name: name,
            lat: this.form.latitude,
            lng: this.form.longitude
          }
        }
      } else {
        this.obj = {
          poi: {
            adcode: this.form.adcode || '',
            name: this.form.address || '',
            lat: this.form.latitude || 40.080734,
            lng: this.form.longitude || 116.602489
          }
        }
      }
      this.mapFlag = true
    },
    // 获取详情数据
    getDetailData() {
      warehouseDetail(this.operationCode).then((res) => {
        res.data.locationManagement = res.data.locationManagement === 1 ? true : false
        this.form = res.data
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.mr15 {
  margin-right: 15px;
}
.dialog-footer {
  margin-top: 20px;
  float: right;
}
.map {
  cursor: pointer;
  color: rgb(27, 164, 239);
}
</style>
